<template>
  <div class="certificate-info">
    <tab-component title="证书信息" tabPosition="right">
      <tab-panel-component label="注册证书" name="register">
        <ul class="QuaCard QuaCard2">
          <li v-for="(item,index) in tableInfo.list" :key="index">
            <div class="num"><span>{{index+1}}</span></div>
            <div class="mur">
              <ul>
                <li><span>注册类别</span>{{item.regCategory}}</li>
                <li><span>注册单位</span>
                  <router-link class="blue" to="/dataService/company/detail?id=">{{item.regUnit}}</router-link>
                </li>
              </ul>
            </div>
            <div class="mut">
              <ul>
                <li><span>注册专业</span>{{item.regProfession}}</li>
                <li><span>发证日期</span>{{item.certTime}}</li>
              </ul>
            </div>
            <div class="mue">
              <ul>
                <li><span>证书编号</span>{{item.certNo}}</li>
                <li><span>发证机关</span>{{item.certAuthority}}</li>
              </ul>
            </div>
            <div class="muw">
              <div>
                <section v-if="item.isEff" class="effective active">正常使用</section>

                <section v-if="item.isInv" class="effective effectiveWx active">异常状态
                  <el-tooltip class="item" effect="dark" content="异常状态原因为: 证书已过有效期" placement="top">
                    <i class="dtFont dtFont-wenhao1"></i>
                  </el-tooltip>
                </section>
              </div>
            </div>
            <div class="mua">
              <a href="javascript:void(0);" @click="popViewOpen(index,item.aType)"><i
                class="dtFont dtFont-chakanzhengshu"></i><br>查看证书</a>
            </div>
          </li>
        </ul>
        <div>
          <el-pagination
            background
            hide-on-single-page
            @size-change="getTableInfo"
            @current-change="getTableInfo"
            :current-page.sync="query.pg"
            :page-sizes="[5, 10, 15, 20]"
            :page-size.sync="query.pgsz"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableInfo.total">
          </el-pagination>
        </div>
      </tab-panel-component>
      <tab-panel-component label="职称证书" name="academicTitle">
        <ul class="QuaCard QuaCard2">
          <li v-for="(item,index) in tableInfo.list" :key="index">
            <div class="num"><span>{{index+1}}</span></div>
            <div class="mur">
              <ul>
                <li><span>发证单位</span>{{item.regCategory}}</li>
                <li><span>职称等级</span>{{item.regUnit}}</li>
              </ul>
            </div>
            <div class="mut">
              <ul>
                <li><span>职称类别</span>{{item.regProfession}}</li>
                <li><span>发证日期</span>{{item.certTime}}</li>
              </ul>
            </div>
            <div class="mue">
              <ul>
                <li><span>证书编号</span>{{item.certNo}}</li>
                <li><span>职称专业</span>{{item.certAuthority}}</li>
              </ul>
            </div>
            <div class="muw">
              <div>
                <section v-if="item.isEff" class="effective active">正常使用</section>
                <section v-if="item.isInv" class="effective effectiveWx active">异常状态
                  <el-tooltip class="item" effect="dark" content="异常状态原因为: 证书已过有效期" placement="top">
                    <i class="dtFont dtFont-wenhao1"></i>
                  </el-tooltip>
                </section>
              </div>
            </div>
            <div class="mua">
              <a href="javascript:void(0);" @click="popViewOpen(index,item.bType)"><i
                class="dtFont dtFont-chakanzhengshu"></i><br>查看证书</a>
            </div>
          </li>
        </ul>
        <div>
          <el-pagination
            background
            hide-on-single-page
            @size-change="getTableInfo"
            @current-change="getTableInfo"
            :current-page.sync="query.pg"
            :page-sizes="[5, 10, 15, 20]"
            :page-size.sync="query.pgsz"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableInfo.total">
          </el-pagination>
        </div>
      </tab-panel-component>
      <tab-panel-component label="学历证书" name="Education">
        <ul class="QuaCard QuaCard2">
          <li v-for="(item,index) in tableInfo.list" :key="index">
            <div class="num"><span>{{index+1}}</span></div>
            <div class="mur">
              <ul>
                <li><span>毕业院校</span>{{item.regCategory}}</li>
                <li><span>学历</span>{{item.regUnit}}</li>
              </ul>
            </div>
            <div class="mut">
              <ul>
                <li><span>所学专业</span>{{item.regProfession}}</li>
                <li><span>学位</span>{{item.regProfession}}</li>
              </ul>
            </div>
            <div class="mue">
              <ul>
                <li><span>入学日期</span>{{item.certTime}}</li>
                <li><span>毕业日期</span>{{item.certTime}}</li>
              </ul>
            </div>
          </li>
        </ul>
        <div>
          <el-pagination
            background
            hide-on-single-page
            @size-change="getTableInfo"
            @current-change="getTableInfo"
            :current-page.sync="query.pg"
            :page-sizes="[5, 10, 15, 20]"
            :page-size.sync="query.pgsz"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableInfo.total">
          </el-pagination>
        </div>
      </tab-panel-component>
      <tab-panel-component label="其他证书" name="other">
        <div class="QuaTleR margin-bottom-20">
            <span
              :class="{active:typeIdx==index}"
              v-for="(item,index) in pull.getType"
              :key="index" @click="typeFu(item.id,index)">{{item.title}}({{item.ti}})</span>
        </div>
        <!--安全三类证书-->
        <section v-show="typeIdx===0">

          <ul class="QuaCard QuaCard2">
            <li v-for="(item,index) in tableInfo.list" :key="index">
              <div class="num"><span>{{index+1}}</span></div>
              <div class="mut" style="width: 220px">
                <ul>
                  <li><span>证书类型</span>{{item.regCategory}}</li>
                  <li><span>证书编号</span>234343242323</li>
                </ul>
              </div>
              <div class="mut" style="width: 270px">
                <ul>
                  <li><span>发证机关</span>{{item.regProfession}}</li>
                  <li><span>首次取得资格时间</span>{{item.certTime}}</li>
                </ul>
              </div>
              <div class="mut" style="width: 270px">
                <ul>
                  <li><span>发证时间</span>{{item.certNo}}</li>
                  <li><span>资格有效期截止</span>{{item.certAuthority}}</li>
                </ul>
              </div>
              <div class="muw">
                <div>
                  <section v-if="item.isEff" class="effective active">正常使用</section>
                  <section v-if="item.isInv" class="effective effectiveWx active">异常状态
                    <el-tooltip class="item" effect="dark" content="异常状态原因为: 证书已过有效期" placement="top">
                      <i class="dtFont dtFont-wenhao1"></i>
                    </el-tooltip>
                  </section>
                </div>
              </div>
              <div class="mua">
                <a href="javascript:void(0);" @click="popViewOpen(index,item.cType)"><i
                  class="dtFont dtFont-chakanzhengshu"></i><br>查看证书</a>
              </div>
            </li>
          </ul>
          <div>
            <el-pagination
              background
              hide-on-single-page
              @size-change="handleSizeChange(tableInfo,$event)"
              @current-change="handleCurrentChange(tableInfo, $event)"
              :current-page.sync="query.pg"
              :page-sizes="[5, 10, 15, 20]"
              :page-size.sync="query.pgsz"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableInfo.total">
            </el-pagination>
          </div>
        </section>

        <!--专业岗位证书-->
        <section v-if="typeIdx===1">
          <ul class="QuaCard QuaCard2">
            <li v-for="(item,index) in tableInfo.list" :key="index">
              <div class="num"><span>{{index+1}}</span></div>
              <div class="mut" style="width:220px;">
                <ul>
                  <li><span>资格类型</span>{{item.regCategory}}</li>
                  <li><span>证书编号</span>3274327472347</li>
                </ul>
              </div>
              <div class="mut">
                <ul>
                  <li><span>资格专业</span>{{item.regProfession}}</li>
                  <li><span>发证机关</span>{{item.certAuthority}}</li>
                </ul>
              </div>
              <div class="mut" style="width: 250px">
                <ul>
                  <li><span>发证时间</span>{{item.certNo}}</li>
                  <li><span>首次取得资格时间</span>{{item.certTime}}</li>
                </ul>
              </div>
              <div class="mut" style="width: 250px">
                <ul>
                  <li>
                    <span>证书状态</span>
                    <span v-if="item.isEff" class="normal">正常使用</span>

                    <span v-if="item.isInv" class="abnormal">异常状态
                          <el-tooltip class="item" effect="dark" content="异常状态原因为: 证书已过有效期" placement="top">
                            <i class="dtFont dtFont-wenhao1"></i>
                          </el-tooltip>
                        </span>
                  </li>
                  <li><span>资格有效期截止</span>{{item.certTime}}</li>
                </ul>
              </div>
              <div class="mua">
                <a href="javascript:void(0);" @click="popViewOpen(index,item.dType)"><i
                  class="dtFont dtFont-chakanzhengshu"></i><br>查看证书</a>
              </div>
            </li>
          </ul>
          <div>
            <el-pagination
              background
              hide-on-single-page
              @size-change="getTableInfo"
              @current-change="getTableInfo"
              :current-page.sync="query.pg"
              :page-sizes="[5, 10, 15, 20]"
              :page-size.sync="query.pgsz"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableInfo.total">
            </el-pagination>
          </div>

        </section>

        <!--技术工人证书-->
        <section v-if="typeIdx===2">
          <ul class="QuaCard QuaCard2">
            <li v-for="(item,index) in tableInfo.list" :key="index">
              <div class="num"><span>{{index+1}}</span></div>
              <div class="mut" style="width:220px;">
                <ul>
                  <li><span>资格类别</span>{{item.regCategory}}</li>
                  <li><span>证书编号</span>3274327472347</li>
                </ul>
              </div>
              <div class="mut">
                <ul>
                  <li><span>技术等级</span>{{item.regProfession}}</li>
                  <li><span>发证机关</span>{{item.certAuthority}}</li>
                </ul>
              </div>
              <div class="mut" style="width: 250px">
                <ul>
                  <li><span>发证时间</span>{{item.certNo}}</li>
                  <li><span>首次取得资格时间</span>{{item.certTime}}</li>
                </ul>
              </div>
              <div class="mut" style="width: 250px">
                <ul>
                  <li>
                    <span>证书状态</span>
                    <span v-if="item.isEff" class="normal">正常使用</span>
                    <span v-if="item.isInv" class="abnormal">异常状态
                          <el-tooltip class="item" effect="dark" content="异常状态原因为: 证书已过有效期" placement="top">
                            <i class="dtFont dtFont-wenhao1"></i>
                          </el-tooltip>
                        </span>
                  </li>
                  <li><span>资格有效期截止</span>{{item.certTime}}</li>
                </ul>
              </div>
              <div class="mua">
                <a href="javascript:void(0);" @click="popViewOpen(index,item.eType)"><i
                  class="dtFont dtFont-chakanzhengshu"></i><br>查看证书</a>
              </div>
            </li>
          </ul>
          <div>
            <el-pagination
              background
              hide-on-single-page
              @size-change="getTableInfo"
              @current-change="getTableInfo"
              :current-page.sync="query.pg"
              :page-sizes="[5, 10, 15, 20]"
              :page-size.sync="query.pgsz"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableInfo.total">
            </el-pagination>
          </div>

        </section>

        <!--特种作业证书-->
        <section v-if="typeIdx===3">
          <ul class="QuaCard QuaCard2">
            <li v-for="(item,index) in tableInfo.list" :key="index">
              <div class="num"><span>{{index+1}}</span></div>
              <div class="mut" style="width:220px;">
                <ul>
                  <li><span>资格类别</span>{{item.regCategory}}</li>
                  <li><span>证书编号</span>3274327472347</li>
                </ul>
              </div>
              <div class="mut">
                <ul>
                  <li><span>技术等级</span>{{item.regProfession}}</li>
                  <li><span>发证机关</span>{{item.certAuthority}}</li>
                </ul>
              </div>
              <div class="mut" style="width: 250px;">
                <ul>
                  <li><span>发证时间</span>{{item.certNo}}</li>
                  <li><span>首次取得资格时间</span>{{item.certTime}}</li>
                </ul>
              </div>
              <div class="mut" style="width: 250px;">
                <ul>
                  <li>
                    <span>证书状态</span>
                    <span v-if="item.isEff" class="normal">正常使用</span>
                    <span v-if="item.isInv" class="abnormal">异常状态
                          <el-tooltip class="item" effect="dark" content="异常状态原因为: 证书已过有效期" placement="top">
                            <i class="dtFont dtFont-wenhao1"></i>
                          </el-tooltip>
                        </span>
                  </li>
                  <li><span>资格有效期截止</span>{{item.certTime}}</li>
                </ul>
              </div>
              <div class="mua">
                <a href="javascript:void(0);" @click="popViewOpen(index,item.fType)"><i
                  class="dtFont dtFont-chakanzhengshu"></i><br>查看证书</a>
              </div>
            </li>
          </ul>
          <div>
            <el-pagination
              background
              hide-on-single-page
              @size-change="getTableInfo"
              @current-change="getTableInfo"
              :current-page.sync="query.pg"
              :page-sizes="[5, 10, 15, 20]"
              :page-size.sync="query.pgsz"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableInfo.total">
            </el-pagination>
          </div>

        </section>
      </tab-panel-component>
    </tab-component>

    <popViewComponent :visible.sync="popView.visible" :type="popView.type" :popData="popView.data" />
    <!-- <pop-view v-if="dialogVisible" :type="type" :popData="popData"></pop-view> -->

  </div>

</template>

<script>
  import '@/assets/css/credit.css';
  import popViewComponent from "../popView";
  import {getTableInfo, getPullStaff} from '@/api/dataService';

  export default {
    name: "cerTable",
    components: { popViewComponent },
    data() {
      return {
        typeIdx: 0,
        tableInfo: {
          fun: 'getTableInfo',
          list: [],
          total: 0,
        },
        query: {
          pg: 1,
          pgsz: 5
        },
        pull: {
          getType: [
            {
              title: '安全三类证书',
              id: 'a88s7d36a6s',
              ti: 9
            },
            {
              title: '专业岗位证书',
              id: 'a88s7d36a7s',
              ti: 5
            },
            {
              title: '技术工人证书',
              id: 'a88s7d36a8s',
              ti: 4
            },
            {
              title: '特种作业证书',
              id: 'a88s7d36a9s',
              ti: 9
            }
          ]
        },
        popView:{
          visible: false,
          type: 'regCert',
          data: {
            cerInfoName: '小蜜蜂',
            cerInfoId: '340111201502190617',
            cerInfoType: '二级注册建造师',
            cerInfoExplain: '机电工程',
            cerInfoPhone: '赣32989403824',
            cerInfoNumber: '93938422',
            cerInfoStartTime: '2019-10-01',
            cerInfoEndTime: '2019-11-01',
            cerInfoZt: '正常使用',
            cerInfoUnit: '江西建工第一建筑有限公司'
          },
        },
      }
    },
    mounted() {
      this.getTableInfo();
    },
    methods: {
      popViewOpen(index) {
        console.log("=========popViewOpen==========")
        this.popView.visible = true;
      },
      //获取人员证书信息
      getTableInfo(data) {
        let {pg, pgsz} = this.query;
        data = {pg, pgsz};
        getTableInfo(data).then(res => {
          this.tableInfo.list = res.rows;
          this.tableInfo.total = res.total;
        })
      },
      typeFu(id, index) {
        this.typeIdx = index;
        this.type = this.pull.getType
      }
    },
    watch: {}
  }
</script>

<style scoped>
  table a:hover {
    color: #216DE5 !important;
  }

  .QuaBoy > section {
    display: block;
  }

  .mur li a:hover {
    text-decoration: underline;
  }

  .mut .normal {
    color: #FF6F27;
  }

  .mut .abnormal {
    color: #9E9E9E;
  }

  .tabs-panel-component {
    margin-top: 20px;
  }

</style>

